{% extends 'marketing/base.html' %}
{% load static %}
{% block content %}
{{ block.super }}
<nav aria-label="breadcrumb">
  <ol class="breadcrumb mb-3">
    <li class="breadcrumb-item"><a href="{% url 'marketing:email_template_list' %}">Email Template</a></li>
    <li class="breadcrumb-item active">{% if email_template %}Edit{% else %}Create{% endif %} Email Template</li>
  </ol>
</nav>
<div class="main_container ml-5 mr-5">
  <div class="row marl">
    <div class="col-md-12">
      <form id="add_form" method="POST" action='' novalidate>
        <div class="overview_form_block row marl justify-content-center">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body">
                <div class="card-title text-center">
                  {% if email_template %}Edit{% else %}Create{% endif %} Email Template
                </div>
                <form>
                  <div class="row marl">
                    <div class="col-md-12">
                      <div class="form-group">
                        <label for="">Title</label><span class="error_marker" style="color:red"> *</span>
                        <input type="text" class="form-control" name="title"
                          value="{% if email_template %}{{ email_template.title }}{% endif %}"
                          placeholder="Enter Template Title">
                      </div>
                      <span id="id_title"></span>
                    </div>
                    <div class="col-md-12">
                      <div class="form-group">
                        <label for="">Subject</label><span class="error_marker" style="color:red"> *</span>
                        <input type="text" class="form-control" name="subject"
                          value="{% if email_template %}{{ email_template.subject }}{% endif %}"
                          placeholder="Enter Template Subject">
                      </div>
                      <span id="id_subject"></span>
                    </div>
                    <div class="col-md-12">
                      <div class="form-group">
                        <label>HTML Code</label><span class="error_marker" style="color:red"> *</span>
                        <div id="editor-container">
                          {% if email_template %}{{ email_template.html|safe }}{% endif %}
                        </div>
                      </div>
                      <input type="hidden" name="html" id="html_content">
                      <span id="id_html"></span>
                    </div>
                    
                    <div class="col-md-12 text-center">
                      <div class="row marl buttons_row text-center form_btn_row">
                        <button type="submit" class="btn btn-default save">Save
                          Template</button>
                        <a href="{% url 'marketing:email_template_list' %}" class="btn btn-default clear">Cancel</a>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}
{% block js_block %}
<script src="{% static 'js/ajaxForm.js' %}"></script>

<script>
  var quill = new Quill('#editor-container', {
    modules: {
      toolbar: [
        [{ header: [1, 2, false] }],
        ['bold', 'italic', 'underline'],
        ['code-block', 'link']
      ]
    },
    placeholder: 'Compose an epic...',
    theme: 'snow' // or 'bubble'
  });

  if (quill.root.innerHTML !== "<p><br></p>") {
    $('#html_content').val(quill.root.innerHTML);
  }


  var preciousContent = document.getElementById('myPrecious');
  var justTextContent = document.getElementById('justText');
  var justHtmlContent = document.getElementById('justHtml');

  quill.on('text-change', function () {
    $('.ql-syntax').css({"background-color":"#23241f","color":"#f8f8f2","overflow":"visible","border-radius":"3px","white-space":"pre-wrap","margin-bottom":"5px","margin-top":"5px","padding":"5px 10px"})
    var delta = quill.getContents();
    var text = quill.getText();
    var justHtml = quill.root.innerHTML;
		/*preciousContent.innerHTML = JSON.stringify(delta);
		justTextContent.innerHTML = text;
		justHtmlContent.innerHTML = justHtml;*/
    $('#html_content').val(justHtml);
  });


  $('.save_btn').click(function (e) {
    e.preventDefault();
    $("form#add_form").submit()
  })

  $('form#add_form').ajaxForm({
    type: 'POST',
    dataType: 'json',
    url: $(this).attr('action'),
    data: $(this).serialize(),
    beforeSend: function (e) {
      $('.ql-syntax').css({"background-color":"#23241f","color":"#f8f8f2","overflow":"visible","border-radius":"3px","white-space":"pre-wrap","margin-bottom":"5px","margin-top":"5px","padding":"5px 10px"})
    },
    success: function (data) {
      console.log("data", data)
      if (data.error == false) {
        window.location = "{% url 'marketing:email_template_list' %}";
      } else {
        /*$(document).ajaxStop($.unblockUI);*/
        // $.unblockUI();
        $('p.failure').remove();
        for (var key in data.errors) {
          $('#id_' + key).html('<p class="error failure"> *' + data.errors[key] + '</p>');
        }
      }
    },
    error: function (xhr, errmsg, err) {
      console.log('error data', errmsg, err)
    }
  });
</script>
{% endblock js_block %}